<template>
  <div>
    <el-dialog :title="operateType === 'add' ? '新增权限' : '更新权限'" :visible.sync="isShow">
      <common-form :formLabel="opertateFormLabel" :form="operateForm" :inline="true" ref="form">
      </common-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="confirm(operateForm)">确定</el-button>
      </div>
    </el-dialog>
    <div class="manage-header">
      <el-button type="primary" @click="addPermission">新增</el-button>
      <common-form :formLabel="formLabel" :form="searchFrom" :inline="true" ref="form">
        <el-button type="primary" @click="getList()">搜索</el-button>
      </common-form>
    </div>
    <premissions-table @changePage="getList()" :tableData="tableData" :config="config" @edit="editPermission"
      @del="delPermission"></premissions-table>
  </div>
</template>

<script>
import CommonForm from '@/views/CommonForm.vue'
import PremissionsTable from '@/views/PremissionsTable.vue'
import { getPermissionList , delPermission , getPermissionSave , getPermissionUpdate} from '@/api/permissions'
export default {
  name: 'PermissionName',
  components: {
    CommonForm,
    PremissionsTable
  },
  data() {
    return {
      operateType: 'add',
      isShow: false,
      opertateFormLabel: [{
        model: 'name',
        label: '权限名称',
        type: 'input'
      }, {
        model: 'description',
        label: '权限描述',
        type: 'input'
      }, {
        model: 'path',
        label: '菜单路径',
        type: 'input',
      }, {
        model: 'icon',
        label: '图标',
        type: 'input'
      }],
      operateForm: {
        name: '',
        description: '',
        path: '',
        icon: ''
      },
      tableData: [],
      config: {
        total: 0,
        page: 1,
        pageSize: 6,
      },
      formLabel: [{
        model: 'keyword',
        label: '',
        type: 'input'
      }],
      searchFrom: {
        keyword: ''
      },
    }
  },
  methods: {
    getList() {
      const params = {
        page: this.config.page,
        pageSize: this.config.pageSize,
        name: this.searchFrom.keyword ? this.searchFrom.keyword : undefined
      }
      getPermissionList(params).then(res => {
        console.log(res);
        if (res.status===200) {
          this.tableData = res.data.data.obj.records
          this.config.total = res.data.data.obj.total
        } else {
          this.$message.error(res.data.msg || '操作失败')
        }
      }).catch(err => {
        this.$message.error('请求出错了：' + err)
      })

    },
    addPermission() {
      this.isShow = true
      this.operateType = 'add'
      this.operateForm = {
        name: '',
        description: '',
        path: '',
        icon: ''
      }
    },
    editPermission(row) {
      this.isShow = true
      this.operateType = 'edit'
      this.operateForm = row

    },confirm(value) {
            if (this.operateType === 'add') {
                console.log(value);
                getPermissionSave(value).then(item=>{
                    if(item.data.code===1){
                        this.$message.success("新增成功")
                        this.isShow=false
                        this.getList();
                    }else{
                        this.$message.error(value.data.msg || "操作失败")
                        this.isShow=false
                    }
                }).catch(err => {
                this.$message.error('请求出错了：' + err)
                this.isShow=false
            })
            } else {
                getPermissionUpdate(value).then(item=>{
                    if(item.status===200){
                        this.$message.success("更新成功")
                        this.isShow=false
                        this.getList();
                    }else{
                        this.$message.error(value.data.msg || "操作失败")
                        this.isShow=false
                    }
                }).catch(err => {
                this.$message.error('请求出错了：' + err)
                this.isShow=false
            })

            }
        },
    delPermission(row) {
      this.$confirm("此操作将永久删除该商品，是否继续?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delPermission({ 'id': row.id }).then(res => {
          if (res.status===200) {
            this.$message.success('删除成功！')
            this.getList()
          } else {
            this.$message.error(res.data.msg || '操作失败')
          }
        })
      })
    }
  },
  created() {
    this.getList()
  }
}
</script>

<style>
.manage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
